<template>
  <div class="hmi-only-select">
    <HmiOnlySelectTable
      :config="config"
      :selectable="selectable"
      :show-toolbar="showToolbar"
      :show-export="showExport"
      :highlight-current-row="highlightCurrentRow"
      @data-loaded="handleDataLoaded"
      @selection-change="handleSelectionChange"
      @row-click="handleRowClick"
      @error="handleError"
    />
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import { useRoute } from "vue-router";
import { useHmiConfigStore, useSettingZoneStore } from "@/store";
import HmiOnlySelectTable from "./HmiOnlySelectTable.vue";
import type { HmiOnlySelectConfig, HmiOnlySelectRow, HmiOnlySelectColumnConfig } from "./types";

interface Props {
  // 基础配置
  apiPath?: string;
  idKey?: string;

  // 显示配置
  selectable?: boolean;
  showToolbar?: boolean;
  showExport?: boolean;
  highlightCurrentRow?: boolean;

  // 分页配置
  pageSize?: number;
  showSizeChanger?: boolean;

  // 定值区配置
  showSettingZone?: boolean;
}

interface Emits {
  (e: "data-loaded", data: HmiOnlySelectRow[]): void;
  (e: "selection-change", selection: HmiOnlySelectRow[]): void;
  (e: "row-click", row: HmiOnlySelectRow): void;
  (e: "error", error: Error): void;
}

const props = withDefaults(defineProps<Props>(), {
  selectable: false,
  showToolbar: true,
  showExport: true,
  highlightCurrentRow: true,
  pageSize: 10,
  showSizeChanger: true,
  showSettingZone: false,
});

const emit = defineEmits<Emits>();

// Store
const route = useRoute();
const hmiConfigStore = useHmiConfigStore();
const settingZoneStore = useSettingZoneStore();

// 配置计算
const config = computed<HmiOnlySelectConfig>(() => {
  // 从路由或 props 获取 API 路径
  const apiPath = props.apiPath || (route?.meta?.params as any)?.api || "";

  // 从 HMI 配置获取表格规则
  // const tableRule = hmiConfigStore.getTableHeaderRuleByUri(apiPath);
  const tableRule = hmiConfigStore.getTableHeaderRuleByPath(route.path);
  const onlySelectRule = tableRule?.columnRule?.onlySelect || [];
  const onlySelectOptions = tableRule?.showRule?.onlySelectOptions || {};

  // 构建列配置
  const columns: HmiOnlySelectColumnConfig[] = onlySelectRule
    .slice()
    .sort((a, b) => (a.index ?? 0) - (b.index ?? 0))
    .map((rule) => ({
      // key: rule.key || "",
      // label: rule.label || "",
      // type: determineColumnType(rule),
      // width: rule.width,
      ...rule,
      minWidth: 120, // 默认最小宽度
    }));

  // 查询参数配置
  const groupStr = onlySelectOptions.group;
  const queryOptions = {
    group: groupStr ? groupStr.split(",").map(Number) : [],
  };

  return {
    apiPath,
    idKey: props.idKey || onlySelectOptions.idKey || "id",
    columns,
    showSettingZone: props.showSettingZone,
    displayZone: settingZoneStore.displayZone,
    pagination: {
      pageSize: props.pageSize,
      showSizeChanger: props.showSizeChanger,
    },
    queryOptions,
    orderByKey: onlySelectOptions.orderByKey || "",
  };
});

// 确定列类型
function determineColumnType(rule: any): "enum" | "number" | "string" | "boolean" {
  if (rule.type) return rule.type;
  if (rule.enumOptions) return "enum";
  if (rule.inputType === "number") return "number";
  if (rule.inputType === "boolean") return "boolean";
  return "string";
}

// 事件处理
function handleDataLoaded(data: HmiOnlySelectRow[]) {
  emit("data-loaded", data);
}

function handleSelectionChange(selection: HmiOnlySelectRow[]) {
  emit("selection-change", selection);
}

function handleRowClick(row: HmiOnlySelectRow) {
  emit("row-click", row);
}

function handleError(error: Error) {
  emit("error", error);
}
</script>

<style scoped>
.hmi-only-select {
  width: 100%;
  height: 100%;
}
</style>
